<template>
	<view>
		<view>
			<navbar name="门店体验"></navbar>
			<view class="tabsView">
				<u-tabs height="100" item-width="240" bg-color="#fff" font-size="30rpx" bar-width="80"
					active-color="#F56767" :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
			</view>
			<view>
				<view v-for="(item,idx) in listData" :key="idx">
					<view class="shop-view" @tap.stop="goDetails(item)">
						<view class="shop-title">
							<view class="shop-titleicon">
								<view class="shop-imgs">
									<image src="http://static.bsyjk.cn/l/0FDFA0AF7FCD496F9856CF566666F79B.png" style="width: 28upx;height: 23upx;" mode=""></image>
								</view>
								<view class="shop-names">
									{{item.storeName}}
								</view>
							</view>
							<view :class="item.orderStatus==1?'shop-state':'shop-staten'" >
								{{item.orderStatus==1?'待使用':'已完成'}}
							</view>
						</view>
						<u-line />
						<view class="content-view">
							<view class="content-image">
								<u-lazy-load height="185" border-radius="10" img-mode="aspectFill"
									:image="item.goodsImageUrl"></u-lazy-load>
							</view>
							<view class="content-jview">
								{{item.goodsName}}
								<view class="content-price">
									¥{{item.goodsOriginalPrice}}
								</view>
								<view class="content-number">
									x{{item.goodsNum}}
								</view>
							</view>
						</view>
						<u-line />
						<view class="practical">
							实付款：¥{{item.goodsSalePrice}}
						</view>
						<view class="feloexpl">
							<view class="type-btn" @tap.stop="orderTap(item)">
								{{item.orderStatus==1?'去使用':'删除订单'}}
							</view>
							<view class="feloexpl-pl" v-show="item.appraiseFlag!=1 && item.orderStatus !=1" @tap.stop="navpingl(item)">
								去评价
							</view>
						</view>
					</view>
				</view>
				<!-- <view v-if="shopList.length <=0" style="text-align: center;color: #9B9B9B;font-size: 30upx;">
					<view class="noDataicon">
					</view>
					暂无数据
				</view> -->

				<view class="">
					<view class="loading-lou" v-if="loadings && pageCurrent>1">
						<view class="loading-san-lou">
							<u-loading size="40" :show="loadings"></u-loading>
							<view class="logintext-lou">一大波数据正在赶来~~</view>
						</view>
					</view>
					<view class="nodata-more-lou" v-if="nodata && !empty">
						没有更多数据
					</view>
					<view class="loading-box" v-if="loadings&&pageCurrent==1">
						<u-loading :show="loadings" color="#2EA7E0" size="70"></u-loading>
						<view class="loading-textsl">
							加载中
						</view>
					</view>
					<!-- 暂无数据 -->
					<view class="nodata-box-lou" v-if="listData.length == 0">
						<image style="width: 500rpx;height: 500rpx;" src="http://static.bsyjk.cn/kong/EEBB1394BA9A48259613083E2078A3F1.png" mode=""></image>
						<view class="loading-textsl">
							暂无数据
						</view>
					</view>
				</view>
			</view>
			<!-- 懒加载动画 -->
			<view class="loading-box">
			  <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
			</view>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"

	export default {
		components: {
			uLoading,
			uTabs,
			uLine,
			uLazyLoad,

		},
		data() {
			return {

				current: 0,
				open: false,//测试展开收起 对接口时换值
				keyword:'',//切换条件
				listData: [], //数据
				pageCurrent: 1, //页码
				pageSize: 10, //条数
				is_pull: false,
				loadings: false,
				last_page: '', //总页数
				loadingone: false,
				nodata: false, //没有更多数据
				empty: false, //是否一条数据都没有



				loadingone:false,
				shopList: [],
				list: [{
					name: '全部',
				}, {
					name: '待使用',
				}, {
					name: '已完成',
				}],
				current: 0,
				sectionCurrent: 0,
				pageCurrent: 1,
				pageSize: 10,
			}
		},
		onLoad() {
			this.orderMd(this.current, this.pageCurrent, this.pageSize, false)
		},
		onShow() {
			this.listData =[]
			this.last_page = 1;
			this.pageCurrent = 1;
			this.nodata = false; //没有更多数据
			this.empty = false;//是否一条数据都没有
			this.orderMd(this.current,1 ,10, false)
		},
		onReachBottom: function() { //分页加载

		//判断总页数是否大于1
		if (this.last_page > 1) {
			//判断当前是否处于上拉加载中
			if (this.is_pull == false) {
				//判断当前页是否小于总页数
				if (this.pageCurrent < this.last_page) {
					this.is_pull = true; //激活上拉状态
					this.pageCurrent++; //当前页数加1
					this.orderMd(this.current, this.pageCurrent, this.pageSize, true)
				}else{
					this.nodata = true;
				}
			}
		}
		},
		onUnload(e) { //页面删除
		},
		methods: {
			orderMddelet(orderId) {
				let _this = this;
				this.$shopnew.delete(global.apiUrls.orderMd + '/'+orderId + '?userId='+ uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						console.log(res)
						if(res.data.code == 1000){
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
							_this.orderMd(_this.current, 1, 10, false)
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					})

			},
			orderTap(item) {
				if (item.orderStatus == 1) {
					uni.navigateTo({
						url: '/pagesMy/my/PurchaseDetails/PurchaseDetails?orderId=' + item.orderId
					})
				} else {
				this.orderMddelet(item.orderId)
				}
			},
			//去详情也米娜
			goDetails(item){
				uni.navigateTo({
					url: '/pagesMy/my/PurchaseDetails/PurchaseDetails?orderId=' + item.orderId
				})
			},
			navpingl(item) {
				this.$urouter.navigateTo({
				  url: '/pagesMy/my/experience/evaluate',
				  params: {
				    orderId: item.orderId, //详情id
					name:item.storeName,//名字
				  }
				});


				// uni.navigateTo({
				// 	url: '/pagesMy/my/experience/evaluate?orderId=' + item.orderId
				// })



			},
			orderMd(orderStatus, pageCurrent, pageSize, onReach) {
				orderStatus = orderStatus == 0 ? '' : orderStatus
				let _this = this;
				this.$shopnew.get(global.apiUrls.orderMd + '?orderStatus=' + orderStatus + '&pageCurrent=' + pageCurrent +
						'&pageSize=' + pageSize + '&userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							// console.log(res)
							// let records = res.data.result.records;
							// if (onReach) {
							// 	_this.shopList = _this.shopList.concat(records)
							// 	uni.hideLoading()
							// } else {
							// 	_this.shopList = records
							// 	_this.loadingone =false
							// }
							if (!res.data.result.records.length && this.pageCurrent == 1) {
								this.empty = true;
							}
							if (res.data.result.records == null) {
								res.data.result.records = [];
							}
							if(onReach){
								this.listData = [...this.listData, ...res.data.result.records];
							}else{
								this.listData = res.data.result.records
							}
							this.is_pull = false;
							this.loadings = false;
							if (res.data.result.pages == null) {
								res.data.result.pages = 0;
							}
							this.last_page = res.data.result.pages;
							if (this.pageCurrent > this.last_page || res.data.result.pages == 1) {
								this.nodata = true;
							}
						}
					}).catch(err => {})
			},
			change(index) {
				this.current = index;
				this.pageCurrent = 1
				this.orderMd(index, 1, this.pageSize, false)
			}
		}
	}
</script>

<style lang="scss">
	.noDataicon {
		width: 213upx;
		height: 209upx;
		background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
		background-size: 213upx 209upx;
		margin: 400upx auto 30upx;
	}
	.shop-view {
		width: 706upx;
		background: #FFFFFF;
		border-radius: 25upx;
		margin: 30upx auto 0;
		padding: 0 20upx 30upx;

		.shop-title {
			height: 73upx;
			line-height: 73upx;

			.shop-titleicon {
				float: left;
				display: flex;
				align-items:center;
				.shop-images{
					width: 28upx;
					height: 23upx;
				}
				.shop-names{
					margin-left: 9upx;
				}

			}

			.shop-state {
				float: right;
				font-size: 26upx;
				font-weight: 400;
				color: #F56767;
			}

			.shop-staten {
				float: right;
				font-size: 26upx;
				font-weight: 400;
				color: #999999;
			}

		}

		.content-view {
			padding: 31upx 0 32upx;
			display: flex;

			.content-image {
				width: 185upx;
				height: 185upx;
			}
		}

		.content-jview {
			width: 480upx;
			height: 185upx;
			padding-left: 20upx;
			position: relative;
			font-size: 26upx;
			font-weight: 500;
			color: #333333;
			line-height: 37upx;

			.content-price {
				position: absolute;
				left: 20upx;
				bottom: 0;
				font-size: 26upx;
				font-weight: 400;
				color: #333333;
				line-height: 37upx;
			}

			.content-number {
				position: absolute;
				right: 20upx;
				bottom: 0;
				font-size: 26upx;
				font-weight: 400;
				color: #333333;
				line-height: 37upx;
			}
		}

		.practical {
			text-align: right;
			padding: 17upx 0 30upx;
		}

		.feloexpl {
			height: 58upx;
			text-align: center;

			.feloexpl-pl {
				width: 150upx;
				height: 58upx;
				border-radius: 29upx;
				border: 1px solid #999999;
				font-size: 26upx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				line-height: 58upx;
				float: right;
				margin-right: 30upx;
			}

			.type-btn {
				width: 150upx;
				height: 58upx;
				border-radius: 29upx;
				border: 1px solid #F56767;
				line-height: 58upx;
				font-size: 26upx;
				font-weight: 500;
				color: #F56767;
				float: right;
			}
		}
	}
</style>
